<template>
	<view class="register">
		<view class="register-box">
			<u--form labelPosition="left" :labelStyle="{color:'#666',fontSize:'22rpx'}" :rules="rules"
				:model="registerForm" ref="uForm">
				<u-form-item label="手机号" labelWidth="80" borderBottom prop="telPhone">
					<u--input border="none" v-model="registerForm.telPhone" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" labelWidth="80" borderBottom prop="validCode">
					<u-input border="none" v-model="registerForm.validCode" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code unique-key="register-patient" ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="密码" labelWidth="80" borderBottom prop="password">
					<u--input password border="none" v-model="registerForm.password" placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-form-item label="确认密码" labelWidth="80" prop="checkPassword">
					<u--input password border="none" v-model="registerForm.checkPassword" placeholder="请重复密码">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="footer-btn">
			<u-button text="确 定" @click="register" shape="circle" class="custom-style"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registerForm: {
					role: 1,
					telPhone: '',
					validCode: '',
					password: '',
					checkPassword: ''
				},
				tips: null,
				rules: {
					telPhone: [{
							required: true,
							message: '请输入注册手机号',
							trigger: ['change', 'blur']
						}, {
							type: 'number',
							message: '注册手机号必须是数字',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								if (value) {
									return uni.$u.test.mobile(value);
								}
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					validCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur']
						},
						{
							type: 'string',
							min: 6,
							max: 16,
							message: '密码长度6-16位',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								const meg = /[a-zA-Z]+/
								return meg.test(value)
							},
							message: '密码必须包含数字和字母',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					checkPassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: ['change', 'blur']
						},
						{
							type: 'string',
							min: 6,
							max: 16,
							message: '密码长度6-16位',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								if (this.registerForm.password !== this.registerForm.checkPassword) {
									return false
								} else {
									return true
								}
							},
							message: '两次输入密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
			};
		},

		methods: {
			codeChange(text) {
				this.tips = text;
			},
			//获取验证码
			getCode() {
				if (!this.registerForm.telPhone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
				}
				if (this.$refs.uCode.canGetCode) {
					let obj = {
						telPhone: this.registerForm.telPhone,
						type: 2,
						role:1
					}
					uni.$http.post('/system/getVerificationCode', obj).then(res => {
						if (res.data.code === 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.showToast({
								icon: 'none',
								title: '验证码已发送'
							})
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})

				} else {
					uni.$u.toast('1分钟以内只能发送一次');
				}
			},
			//确定注册
			register() {
				this.$refs.uForm.validate().then(res => {
					uni.$http.post('/user/userRegister', this.registerForm).then(res => {
						if (res.data.code === 200) {
							uni.showToast({
								icon: 'loading',
								title: '注册成功,请稍等'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login'
								})
							}, 700)

						}
					})
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		padding: 20rpx;
		box-sizing: border-box;

		.register-box {
			width: 100%;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;

			/deep/.u-input__content__field-wrapper__field {
				font-size: 18rpx !important;
			}
		}

		.footer-btn {
			width: 100%;
			margin-top: 50rpx;

			.custom-style {
				background-color: #54b6ab;
				color: #fff;
			}
		}
	}
</style>